<template>
    <div class="menus">

      <router-view></router-view>

      <van-tabbar v-model="active">
        <van-tabbar-item icon=" iconfont icon-shouye footer-tabar" class="tabbarss" >首页</van-tabbar-item>
        <van-tabbar-item icon=" iconfont icon-tongji footer-tabar" class="tabbarss" >统计</van-tabbar-item>
        <van-tabbar-item icon=" iconfont icon-gerenzhongxin footer-tabar" class="tabbarss">我的</van-tabbar-item>
      </van-tabbar>
    </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
        name: "menus",
      data(){
          return {
            active: 0,
          }
      },
      watch:{
        active:function (val,oldVal) {
          this.memberDetails.active=val;
          if(val==0){
            this.$router.push({ name: "home"});
          }else if(val==1){
            this.$router.push({ name: "report"});

          }else{
            this.$router.push({ name: "my"});
          }
        }
      },
      computed: {
        ...mapState({
          memberDetails:"data"
        })
      },
      methods:{
        loads(){
          this.active=this.memberDetails.active;
          if(this.active==0){
            this.$router.push({ name: "home"});
          }
        }
      },
      mounted(){
        this.loads();
      }

    }
</script>

<style scoped>
  .menus{
    font-size:12px;
    color:#666;

  }
  .menus .iconfont{
    font-size:24px!important;
  }

  .van-tabbar-item--active{
    color:#3C8DBC!important;
  }
  .footer-tabar{

  }
  .van-tabbar-item__icon .footer-tabar {
    font-size: 24px!important;
  }
  .footer-tabar{
    font-size: 56px!important;
  }
  .tabbarss{
    font-size:16px!important;
  }
  .van-tabbar-item__icon .van-icon {
    font-size: 18px!important;
    display: block!important;
  }
</style>
